<template>
      <div id="calculator" class="active">
        <div class="navbar">
          <nav role="navigation" class="teal nav-extended">
            <div class="nav-wrapper"></div>
            <div class="nav-content">
              <div href="#" class="title">上海市五险一金及税后工资
                <span>计算器</span></div>
            </div>
          </nav>
        </div>
        <div class="navbar-fixed">
          <nav role="navigation" class="teal lighten-1">
            <div class="nav-wrapper">
              <div href="#" class="title">上海市五险一金及税后工资
                <span>计算器</span></div>
            </div>
          </nav>
        </div>
        <div id="main-content">
          <div class="main-margin">
            <div id="index-banner" class="section section-with-bottom-nav">
              <div class="container">
                <div class="row">
                  <div class="col s12">
                    <div class="card-image calculator-ad">
                      <ins id="ad-calculator-0" data-ad-client="ca-pub-0782326845495182" data-ad-slot="7260986812" data-ad-format="horizontal" class="adsbygoogle" style="display: block;"></ins>
                    </div>
                    <div data-sr-id="1" class="card reveal" style="position: relative; z-index: 995; visibility: visible; transform: translateY(0px) scale(1); opacity: 1; transition: box-shadow 0.25s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;">
                      <form id="before-tax-form" class="z-depth-2">
                        <div id="before-tax-card" class="card-content">
                          <div class="rmb">￥</div>
                          <div class="input-field">
                            <input id="before-tax" type="number" max="99999999" min="0" step="0.01" class="validate" v-model="before_tax" @input="changeBase($event)"/>
                            <label for="before-tax" data-error="请正确填写税前工资" class="">税前工资（月薪）</label></div>
                          <input type="button"  title="计算" id="button-calc" class="z-depth-3 btn btn-floating btn-large waves-effect waves-light red darken-1" @click="work()" style="position: absolute; right: 24px; bottom: -28px;" value="计算" /></div>
                        <div id="after-tax-card" class="card-content" v-show="detail_display">
                          <div class="rmb">￥</div>
                          <div class="input-field">
                            <input id="after-tax" type="number" disabled="disabled" :value="after_tax"/>
                            <label for="after-tax">税后工资（月薪）</label>
                          </div>
                        </div>
                      </form>
                      <div class="card-content teal lighten-5">
                        <form id="calculator-options">
                          <h5>五险一金汇缴设置</h5>
                          <input type="hidden" id="max_base_3j" value="21396" />
                          <input type="hidden" id="min_base_3j" value="4279" />
                          <input type="hidden" id="max_base_gjj" value="21400" />
                          <input type="hidden" id="min_base_gjj" value="2300" />
                          <input type="hidden" id="city" value="shanghai" />
                          <div class="row">
                            <div class="col s7">
                              <div class="input-field">
                                <input :disabled="!is_base_3j_customize" id="input_base_3j" type="number" max="99999999" min="0" step="0.01" class="validate" v-model="input_base_3j" />
                                <label for="input_base_3j" class="active">社保汇缴基数
                                  <span>（下限）</span>
                                  <span style="display: none;">（上限）</span></label>
                              </div>
                            </div>
                            <div class="col s5">
                              <div class="checkbox-field">
                                <input id="input_is_base_3j_customize" :checked="is_base_3j_customize" type="checkbox" class="filled-in" @click="tjCustomize()"/>
                                <label for="input_is_base_3j_customize">自定义</label></div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col s7">
                              <div class="input-field">
                                <input :disabled="!is_base_gjj_customize" id="input_base_gjj" type="number" max="99999999" min="0" step="0.01" class="validate" v-model="input_base_gjj" />
                                <label for="input_base_gjj" class="active">公积金汇缴基数
                                  <span>（下限）</span>
                                  <span style="display: none;">（上限）</span></label>
                              </div>
                            </div>
                            <div class="col s5">
                              <div class="checkbox-field">
                                <input id="input_is_base_gjj_customize" :checked="is_base_gjj_customize" type="checkbox" class="filled-in" @click="gjjCustomize()"/>
                                <label for="input_is_base_gjj_customize">自定义</label></div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col s7">
                              <div class="checkbox-field">
                                <input id="input_is_gjj" :checked="is_gjj" type="checkbox" class="filled-in" @click="isPayGjj()" />
                                <label for="input_is_gjj">汇缴住房公积金</label></div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                    <div data-sr-id="2" class="card reveal" style="position: relative; z-index: 994; visibility: visible; transform: translateY(0px) scale(1); opacity: 1; transition: box-shadow 0.25s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;">
                      <div class="card-image calculator-result-ad"></div>
                      <div id="detail" class="card-content" v-show="detail_display">
                        <h5>五险一金汇缴明细</h5>
                        <div id="detail-tables">
                          <table id="detail-table" class="table bordered" style="table-layout: fixed; margin: 5px 0px;">
                            <tbody>
                              <tr class="align-helper" style="height: 0px; font-size: 0px; line-height: 0px; margin: 0px; padding: 0px; border-width: 0px;">
                                <td></td>
                                <td></td>
                                <td width="40px;"></td>
                                <td></td>
                                <td width="40px;"></td>
                              </tr>
                              <tr>
                                <th></th>
                                <th colspan="2">个人应缴部分</th>
                                <th colspan="2">单位应缴部分</th></tr>
                              <tr>
                                <td>养老保险金</td>
                                <td id="show_personal_yanglao" class="align-right">{{p_yanglao}}</td>
                                <td class="align-right">(8%)</td>
                                <td id="show_org_yanglao" class="align-right">{{o_yanglao}}</td>
                                <td class="align-right">(20%)</td></tr>
                              <tr>
                                <td>医疗保险金</td>
                                <td id="show_personal_yiliao" class="align-right">{{p_yiliao}}</td>
                                <td class="align-right">(2%)</td>
                                <td id="show_org_yiliao" class="align-right">{{o_yiliao}}</td>
                                <td class="align-right">(9.5%)</td></tr>
                              <tr>
                                <td>失业保险金</td>
                                <td id="show_personal_shiye" class="align-right">{{p_shiye}}</td>
                                <td class="align-right">(0.5%)</td>
                                <td id="show_org_shiye" class="align-right">{{o_shiye}}</td>
                                <td class="align-right">(0.5%)</td></tr>
                              <tr>
                                <td>住房公积金</td>
                                <td id="show_personal_gjj" class="align-right">{{p_gjj}}</td>
                                <td class="align-right">(7%)</td>
                                <td id="show_org_gjj" class="align-right">{{o_gjj}}</td>
                                <td class="align-right">(7%)</td></tr>
                              <!-- <tr>
                                <td>补充公积金</td>
                                <td id="show_personal_exgjj" class="align-right">{{p_exgjj}}</td>
                                <td class="align-right show_percent_factor_exgjj"></td>
                                <td id="show_org_exgjj" class="align-right">{{o_exgjj}}</td>
                                <td class="align-right show_percent_factor_exgjj"></td>
                              </tr> -->
                              <tr>
                                <td>工伤保险金</td>
                                <td></td>
                                <td></td>
                                <td id="show_org_gongshang" class="align-right">{{o_gongshang}}</td>
                                <td class="align-right">(0.2%)</td></tr>
                              <tr>
                                <td>生育保险金</td>
                                <td></td>
                                <td></td>
                                <td id="show_org_shengyu" class="align-right">{{o_shengyu}}</td>
                                <td class="align-right">(1%)</td></tr>
                              <tr class="sum">
                                <td>共计支出</td>
                                <td id="show_personal_allpay" class="align-right">{{p_total}}</td>
                                <td width="60px;"></td>
                                <td id="show_org_allpay" class="align-right">{{o_total}}</td>
                                <td width="60px;"></td>
                              </tr>
                            </tbody>
                          </table>
                          <h5 style="margin: 16px 0px 4px;">个人所得税缴纳明细</h5>
                          <table class="table bordered" style="table-layout: fixed; width: 100%; margin: 5px 0px;">
                            <tbody>
                              <tr>
                                <td colspan="4">扣除五险一金后月薪（应税工资）</td>
                                <td id="show_before_tax" class="align-right">{{pre_tax}}</td>
                              </tr>
                              <tr>
                                <td colspan="4">个人所得税</td>
                                <td id="show_tax" class="align-right">{{p_tax}}</td>
                              </tr>
                              <tr class="sum">
                                <td colspan="4">税后工资</td>
                                <td id="show_result" class="align-right">{{after_tax}}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div class="card-image calculator-ad">
                        <ins id="ad-calculator-1" data-ad-client="ca-pub-0782326845495182" data-ad-slot="7260986812" data-ad-format="horizontal" class="adsbygoogle" style="display: block;"></ins>
                      </div>
                    </div>
                    <div class="card chart" style="display: none;">
                      <div class="card-content">
                        <h5>税前工资去向（共 ￥
                          <span id="before-tax-sum"></span>）</h5>
                        <div id="chart1" style="min-height: 420px;"></div>
                      </div>
                      <div class="card-image calculator-result-ad"></div>
                    </div>
                    <div class="card chart" style="display: none;">
                      <div class="card-content">
                        <h5>单位成本去向（共 ￥
                          <span id="company-cost-sum"></span>）</h5>
                        <div id="chart2" style="min-height: 560px;"></div>
                      </div>
                      <div class="card-image calculator-result-ad"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</template>

<script>

export default {
  name: 'GongJJ',
  data () {
    return {
      input_base_3j: 4279,
      input_base_gjj: 2300,
      before_tax: '',
      is_base_3j_customize: false,
      is_base_gjj_customize: false,
      detail_display: false,
      is_gjj: true,
      base_gjj_back: 0,
      p_yanglao: 0.00,
      p_yiliao: 0.00,
      p_shiye: 0.00,
      p_gjj: 0.00,
      p_exgjj: 0.00,
      p_total: 0.00,
      o_yanglao: 0.00,
      o_yiliao: 0.00,
      o_shiye: 0.00,
      o_gjj: 0.00,
      o_exgjj: 0.00,
      o_gongshang: 0.00,
      o_shengyu: 0.00,
      o_total: 0.00,
      p_tax: 0.00,
      pre_tax: 0.00,
      after_tax: 0.00,
      tax_rate: 0,
      tax_su: 0

    }
  },
  methods: {
    tjCustomize (e) {
      this.is_base_3j_customize = !this.is_base_3j_customize
    },

    gjjCustomize (e) {
      this.is_base_gjj_customize = !this.is_base_gjj_customize
    },

    isPayGjj () {
      this.is_gjj = !this.is_gjj
      this.base_gjj_back = this.input_base_gjj
    },

    changeBase (e) {
      let salary = parseInt(e.target.value)
      if (salary > parseInt(this.input_base_3j)) {
        this.input_base_3j = salary
        this.input_base_gjj = salary
      } else {
        this.input_base_3j = 4279
        this.input_base_gjj = 2300
      }
    },
    // 个人所得税算法
    incomeTax (val) {
      if (parseFloat(val) <= 1500) {
        this.tax_rate = 0.03
        this.tax_su = 0
      } else if (val > 1500 && val <= 4500) {
        this.tax_rate = 0.1
        this.tax_su = 105
      } else if (val > 4500 && val <= 9000) {
        this.tax_rate = 0.2
        this.tax_su = 555
      } else if (val > 9000 && val <= 35000) {
        this.tax_rate = 0.25
        this.tax_su = 1005
      } else if (val > 35000 && val <= 55000) {
        this.tax_rate = 0.3
        this.tax_su = 2755
      } else if (val > 55000 && val <= 80000) {
        this.tax_rate = 0.35
        this.tax_su = 5505
      } else {
        this.tax_rate = 0.45
        this.tax_su = 13505
      }
      let tax = (val - 3500) * this.tax_rate - this.tax_su
      return tax.toFixed(2)
    },
    work () {
      // 是否缴纳公积金
      if (this.is_gjj) {
        this.base_gjj_back = this.input_base_gjj
      } else {
        this.base_gjj_back = 0
      }
      // 个人养老
      this.p_yanglao = (parseInt(this.input_base_3j) * 0.08).toFixed(2)
      // 企业养老
      this.o_yanglao = (parseInt(this.input_base_3j) * 0.2).toFixed(2)

      // 个人医疗
      this.p_yiliao = (parseInt(this.input_base_3j) * 0.02).toFixed(2)
      // 企业医疗
      this.o_yiliao = (parseInt(this.input_base_3j) * 0.095).toFixed(2)

      // 个人失业
      this.p_shiye = (parseInt(this.input_base_3j) * 0.5 / 100).toFixed(2)
      // 企业失业
      this.o_shiye = (parseInt(this.input_base_3j) * 0.5 / 100).toFixed(2)

      // 个人公积金
      this.p_gjj = (parseInt(this.base_gjj_back) * 0.07).toFixed(2)
      // 企业公积金
      this.o_gjj = (parseInt(this.base_gjj_back) * 0.07).toFixed(2)

      // 工伤险
      this.o_gongshang = (parseInt(this.input_base_3j) * 0.2 / 100).toFixed(2)
      // 生育险
      this.o_shengyu = (parseInt(this.input_base_3j) / 100).toFixed(2)

      // 四险之后
      this.pre_tax = (this.before_tax - this.p_yanglao - this.p_yiliao - this.p_shiye - this.p_gjj).toFixed(2)

      // 个人所得税
      this.p_tax = this.incomeTax(this.pre_tax)

      // 个人总计支出
      let pt = (parseFloat(this.p_yanglao) + parseFloat(this.p_yiliao) + parseFloat(this.p_shiye) + parseFloat(this.p_gjj))
      this.p_total = pt.toFixed(2)

      // 企业总计支出
      let ot = parseFloat(this.o_yanglao) + parseFloat(this.o_yiliao) + parseFloat(this.o_shiye) + parseFloat(this.o_gjj) + parseFloat(this.o_gongshang) + parseFloat(this.o_shengyu)
      this.o_total = ot.toFixed(2)

      // 税后所得
      this.after_tax = (this.pre_tax - this.p_tax).toFixed(2)

      this.detail_display = true
    }
  }
}
</script>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
   margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}
</style>
